import { PureComponent } from 'react';
import moment from 'moment';
import styles from './StaffInfoList.less';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    DatePicker,
    Icon,
    Button
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
 	labelCol: { span: 10 },
   	wrapperCol: { span: 14 },
};

@Form.create()
class UpdateForm extends PureComponent {
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	linkManList:[
		    	{
					byyx: '北京大学',
					zy: '信息工程',
					xl: '1',
					jxfs: '1',
					rxsj: '1',
					bysj: '1',
					sfdyxl: '1',
					id: '1'
		    	},
		    	{
					byyx: '北京大学',
					zy: '信息工程',
					xl: '1',
					jxfs: '1',
					rxsj: '1',
					bysj: '1',
					sfdyxl: '1',
					id: '2'
		    	},
	    	],
	    }
	}
 

	handleLocalUpdate = (event) => {
		event.preventDefault();
		const { form,handleUpdateByEdu } = this.props;

	    form.validateFields((err, fieldsValue) => {
	        if (err) return;
		    form.resetFields();
		    handleUpdateByEdu(fieldsValue);
		});
	};
	
	
	linkManList = () => {
		const { handleLinkMan,linkManCurrentIndex,cancelLinkMan,handleDeleteByLinkMan } = this.props;
  		const { getFieldDecorator } = this.props.form;
  		const _this = this;
  		return this.state.linkManList.map(function(res,index) {
			const editLinkMan = res.id == linkManCurrentIndex ? true:false;
		  	return (
				<div style={{marginBottom:'0'}}>
			      	<div className={styles.eduContainer}>
			      		<span>联系人{index + 1}</span>
			      		<div style={{float: "right"}}>
			      			<div className={styles.eduEdit} onClick={handleLinkMan.bind(_this,res)}>
			      				<Icon type="edit"/>编辑
			      			</div>
			      			<Icon type="delete" style={{fontSize: '16px',color: '#c0c4cc'}} onClick={handleDeleteByLinkMan.bind(_this,res)}/>
			      		</div>
			      	</div>
			      	<Form layout="vertical" onSubmit={_this.handleLocalUpdate} style={editLinkMan?{display: "block"}:{display: 'none'}}>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="联系人姓名">
							            {getFieldDecorator('linkman_name', {
							            rules: [{ required: true, message: '请输入1-50位字符的联系人姓名', max: 50}],
							            })(<Input placeholder="1-50位字符" />)}
							        </FormItem>
						        </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="关系">
							            {getFieldDecorator('linkman_gx', {
							            rules: [{ required: false, message: '最多输入50位字符', max: 50}],
							            })(<Input placeholder="1-50位字符" />)}
							        </FormItem>
						        </Col>
							
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col md={12} sm={24}>
						          <FormItem  label="联系人电话">
						              {getFieldDecorator('linkman_phone', {
						              rules: [{ required: false, message: '手机号码格式不符！',  pattern:/^1(3|4|5|6|7|8|9)\d{9}$/ }],
						              })(<Input placeholder="正规手机号格式" />)}
						          </FormItem>
						        </Col>
						       	<Col  md={12} sm={24}>
							        <FormItem  label="联系人工作单位">
							            {getFieldDecorator('linkman_gzdw', {
							            rules: [{ required: false, message: '最多输入50位字符', max: 50}],
							            })(<Input placeholder="1-50位字符" />)}
							        </FormItem>
						        </Col>
					
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="联系人职务">
							            {getFieldDecorator('linkman_zw', {
							            rules: [{ required: false, message: '最多输入50位字符', max: 50}],
							            })(<Input placeholder="1-50位字符" />)}
							        </FormItem>
						        </Col>
							
					    	</Row>

					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{marginBottom: '30px'}}>
						    	<Col md={12} sm={24}>
					    			<Button 
					            	size="large" 
					            	style={{marginRight: '10px'}}
					            	onClick={()=> {
					            		const { form } = _this.props;
		  								form.resetFields();
					            		cancelLinkMan();
					            	}}>
					            	取消
					           		</Button>
						            <Button size="large" type="primary" htmlType="submit">保存</Button>
						        </Col>
						    </Row>
			
			
						</Form>
						<Form  {...formItemLayout} style={editLinkMan?{display: "none"}:{display: 'block'}}>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="联系人姓名">
							            {getFieldDecorator('linkman_name')(<span></span>)}
							        </FormItem>
						        </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="关系">
							            {getFieldDecorator('linkman_gx')(<span></span>)}
							        </FormItem>
						        </Col>
							
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col md={12} sm={24}>
						          <FormItem  label="联系人电话">
						              {getFieldDecorator('linkman_phone')(<span></span>)}
						          </FormItem>
						        </Col>
						       	<Col  md={12} sm={24}>
							        <FormItem  label="联系人工作单位">
							            {getFieldDecorator('linkman_gzdw')(<span></span>)}
							        </FormItem>
						        </Col>
					
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="联系人职务">
							            {getFieldDecorator('linkman_zw')(<span></span>)}
							        </FormItem>
						        </Col>
							
					    	</Row>
		
						</Form>
		      	</div>
		  	)
		
		});
  	}

  render() {

return (
	<div>
		{this.linkManList()}
	</div>
);
  }

}

export default UpdateForm;
